<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="maxbox">
    <div style="margin-bottom: 10px;">
      <h1>用户管理</h1>
    </div>
    <div class="message">
      <el-table :header-cell-style="{
        background: 'rgb(179, 108, 255)',
        textAlign: 'center',
        color: 'white'
      }" :data="orders" style="width: 100%" :cell-style="{ textAlign: 'center' }">
        <el-table-column prop="id" label="用户ID" width="80" />
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="email" label="邮箱"  />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="sex" label="性别" />
        <el-table-column prop="address" label="地址" />
        <el-table-column label="操作" class="changetable" >
          <template #default="{ row }">
              <el-button size="small" type="primary" @click="LookUserInofoDetail(row.id)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts" name="UserInfo">
import {alluserListApi,userDetailEvery} from '../../api/index.js'
import { onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()
//子向父亲通信,传过来的参数使用searchWords进行接收
let searchWords = reactive({})

//定义变量接收
const orders = ref<any[]>([])
//获取用户的详情列表
const userinfoPageMessage = () => {
  alluserListApi().then((res) => {
    orders.value = res.data.data
  })
}
//点击跳转用户详情页
const LookUserInofoDetail = (id: any) => {
  router.push({
    path: '/userinfodetail',
    query: {
      id
    }
  })
}
//点击删除用户信息
const showDialog = ref(false)
const handleDelete = (id: any) => {
  // 执行删除操作
  showDialog.value = false // 隐藏对话框
  deleteUserInfo(id).then((res) => {
    if (res.data.code === 200) {
      ElMessage({
        message: 'success',
        type: 'success',
        duration: 2000,
        onClose: () => {
          userinfoPageMessage()
        }
      })
    }
  })
}
//点击关闭dialog
const handleClose = () => {
  showDialog.value = false // 隐藏对话框
}
//分页

//挂载userinfoPageMessage的请求
onMounted(() => {
  userinfoPageMessage()
})
</script>

<style scoped lang="scss">
.maxbox {
  margin-top: 10px;
  padding-left: 30px;
  color: rgb(184, 120, 251);

  .session {
    margin-top: 20px;
    box-sizing: border-box;
    position: relative;
    border: 2px solid rgb(246, 225, 246);
    background-color: white;
    margin-bottom: 10px;
    padding-left: 20px;
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}

.el-table {
  border: 2px solid rgb(246, 225, 246);
}

.flexbox {
  display: flex;
}

.el-table__cell {
  background-color: red !important;
}
</style>
